<template>
	<view>
		<!-- #ifdef APP -->
		<view style="width: 100%; height: 80rpx; background-color: transparent;"></view>
		<!-- #endif -->
		<view style="width: 100%;">
			<view style="display: flex; flex-direction: row;">
				<image @click="close" src="@/static/content/mysong/back.png" style="width: 45rpx; height: 45rpx; margin-top: 40rpx; margin-left: 6%;"></image>
				<view @click="close" style="font-size: 16px; color: #FFFFFF; margin-top: 39rpx; margin-left: 20rpx;">返回</view>
				<view style="font-size: 18px; font-weight: bold; color: #FFFFFF; margin-top: 38rpx; margin-left: 19.5%;">我的歌单</view>
			</view>
		</view>
		<scroll-view :style="'width: 100%; height: '+ (screenHeight*0.88) +'px; margin-top: 20rpx;'" :scroll-y="true">
			<view style="width: 1px; height: 1px;"></view>
			<block v-if="show" v-for="(list,index) in musicList">
				<view style="width: 88%; background-color: #504f50; border-radius: 20rpx; display: flex; flex-direction: row; margin-top: 50rpx; margin-left: 6%;">
					<view style="display: flex; flex-direction: column; width: 60%; padding: 10rpx; margin-left: 30rpx; margin-bottom: 10rpx;">
						<view style="width: 90%; font-size: 18px; font-weight: bold; color: #FFFFFF; margin-top: 10rpx; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: wrap; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical;">
							{{list.title}}
						</view>
						<view style="width: 90%; font-size: 14px; color: #FFFFFF; margin-top: 10rpx; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: wrap; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical;">
							{{list.platform}}音乐-{{list.id}}
						</view>
					</view>
					<view v-if="list.isopen==false" @click="openUP(index)" style="font-size: 14px; font-weight: bold; color: #FFFFFF; opacity: 0.6; position: absolute; right: 280rpx; margin-top: 50rpx;">展开</view>
					<view v-if="list.isopen==true" @click="openUP(index)" style="font-size: 14px; font-weight: bold; color: #FFFFFF; opacity: 0.6; position: absolute; right: 280rpx; margin-top: 50rpx;">收起</view>
					<image @click="editeList(index)" src="@/static/content/edite.png" style="width: 40rpx; height: 40rpx; margin-top: 48rpx; opacity: 0.5; position: absolute; right: 180rpx;"></image>
					<image @click="deleteList(index)" src="@/static/content/mysong/delete.png" style="width: 55rpx; height: 55rpx; margin-top: 40rpx; opacity: 0.5; position: absolute; right: 80rpx;"></image>
				</view>
				<block v-if="list.isopen">
					<input :ignoreCompositionEvent="false" @input="input" @focus="focus(index)" placeholder="请输入要搜索的歌曲,体验即刻搜索歌曲" style="text-align: center; border: 1px solid #999999; padding: 20rpx; font-size: 14px; color: #FFFFFF; border-radius: 40px; width: 70%; margin-top: 20rpx; margin-left: 12%;"/>
					<block v-for="(li,inde) in list.showList">
						<view @click="playThis(index,inde)" style="width: 75%; background-color: #504f50; border-radius: 20rpx; display: flex; flex-direction: row; margin-top: 20rpx; margin-left: 12%;">
							<image :src="li.pic" mode="aspectFill" style="width: 110rpx; height: 110rpx; border-radius: 10rpx; margin-top: 15rpx; margin-left: 15rpx;"></image>
							<view style="display: flex; flex-direction: column; width: 60%; padding: 10rpx; margin-left: 30rpx; margin-bottom: 10rpx;">
								<view style="width: 90%; font-size: 18px; font-weight: bold; color: #FFFFFF; margin-top: 10rpx; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: wrap; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical;">
									{{li.title}}
								</view>
								<view style="width: 90%; font-size: 14px; color: #FFFFFF; margin-top: 10rpx; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: wrap; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical;">
									{{li.author}}
								</view>
							</view>
						</view>
					</block>
				</block>
			</block>
			<view @click="addPlaylist" style="width: 260rpx; height: 80rpx; display: flex; flex-direction: row; border: 1px #FFFFFF solid; border-radius: 80rpx; margin-top: 80rpx; margin-left: 34%; opacity: 0.6;">
				<image src="@/static/content/add.png" style="width: 80rpx; height: 80rpx;"></image>
				<view style="font-size: 14px; font-weight: bold; color: #FFFFFF; margin-top: 20rpx; margin-left: 20rpx;">添加歌单</view>
			</view>
			<view style="font-size: 12px; text-align: center; margin-top: 30rpx; color: #FFFFFF; opacity: 0.6;">注：目前仅支持添加QQ音乐歌单</view>
			<view @click="close" style="width: 200rpx; height: 80rpx; border: 1px #FFFFFF solid; border-radius: 80rpx; margin-top: 100rpx; margin-left: 38%; opacity: 0.6;">
				<view style="font-size: 14px; font-weight: bold; color: #FFFFFF; text-align: center;padding-top: 20rpx;">返回</view>
			</view>
			<view style="width: 100%; height: 500rpx;"></view>
		</scroll-view>
		<!-- 输入框 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" title="请输入歌单链接" mode="input" :before-close="true" @close="closeDialog" @confirm="dialogInputConfirm">
				<view style="display: flex; flex-direction: column; width: 80%; margin-left: -40rpx;">
					<input v-model="text" style="border: 1px solid #f2f2f2; border-radius: 10rpx; padding: 10px; width: 100%; font-size: 14px;" :maxlength="300" placeholder="请输入从QQ音乐分享的链接"/>
					<view @click="tocheck" style="font-size: 12px; font-weight: bold; text-align: center; margin-top: 20px; margin-left: 30rpx; color: #1444fe;">QQ音乐歌单导入步骤>>></view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<!-- 改名输入框 -->
		<uni-popup ref="inputDialogx" type="dialog">
			<uni-popup-dialog ref="inputClosex" title="请输入新歌单名称" mode="input" :before-close="true" @close="closeDialogx" @confirm="dialogInputConfirmx">
				<view style="display: flex; flex-direction: column; width: 80%; margin-left: -40rpx;">
					<input v-model="name" style="border: 1px solid #f2f2f2; border-radius: 10rpx; padding: 10px; width: 100%; font-size: 14px;" :maxlength="300" placeholder="请重新输入新歌单名称"/>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup type="center" ref="msgw">
			<view style="width: 100%;">
				<view style="font-size: 14px; font-weight: bold; color: #FFFFFF;">请稍等...</view>
			</view>
		</uni-popup>
		<uni-popup type="center" ref="msgv">
			<view style="width: 100%;">
				<view style="font-size: 14px; font-weight: bold; color: #FFFFFF;">输入不能为空</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"myplaylist",
		data() {
			return {
				screenHeight: 0,
				Music: [],
				
				platform: "",
				text: "",
				musicList: [],//歌单列表
				name: "",
				index: 0,
				
				show: true,
			};
		},
		created() {
			this.screenHeight = uni.getSystemInfoSync().screenHeight;
			this.platform = uni.getSystemInfoSync().platform;
			let musicList = JSON.stringify(uni.getStorageSync('musicList'));
			if(musicList.length == 2){
				uni.setStorageSync('musicList', []);
			} else {
				this.musicList = uni.getStorageSync('musicList');
			}
		},
		destroyed() {
			for(let i=0;i<this.musicList.length;i++) {
				this.musicList[i].isopen = false;
			}
			uni.setStorageSync('musicList', this.musicList);
		},
		methods:{
			tocheck() {
				window.open("https://kdocs.cn/l/cnvqqm6FQFOJ");
			},
			openUP(index) {
				this.index = index;
				if(this.musicList[this.index].isopen == false) {
					this.musicList[this.index].isopen = true;
				} else {
					this.musicList[this.index].isopen = false;
				}
			},
			input(e) {
				let value = e.detail.value;
				const dataArray = JSON.parse( JSON.stringify( this.musicList[this.index].playList ) );
				const keyword = value;
				const filteredArray = dataArray.filter(item => item.searchText.includes(keyword));
				this.musicList[this.index].showList = filteredArray;
			},
			focus(index) {
				this.index = index;
			},
			dialogInputConfirmx() {
				if(this.name == ''){
					this.$refs.msgv.open('center');
					setTimeout(()=>{
						this.$refs.msgv.close();
					},1500);
					return;
				}
				this.musicList[this.index].title = this.name;
				this.name = "";
				this.closeDialogx();
				uni.setStorageSync('musicList', this.musicList);
			},
			closeDialogx() {
				this.$refs.inputDialogx.close();
			},
			editeList(index) {
				this.index = index;
				this.name = this.musicList[index].title;
				this.$refs.inputDialogx.open();
			},
			addPlaylist() {
				this.$refs.inputDialog.open();
			},
			closeDialog() {
				this.$refs.inputDialog.close();
			},
			dialogInputConfirm() {
				if(this.text == ''){
					this.$refs.msgv.open('center');
					setTimeout(()=>{
						this.$refs.msgv.close();
					},1500);
					return;
				}
				if(this.text.indexOf('qq') !== -1) {
					// 创建URL对象
					const parsedUrl = new URL(this.text);
					const params = new URLSearchParams(parsedUrl.search);
					const id = params.get('id');
					this.$refs.msgw.open('center');
					setTimeout(()=>{
						this.$refs.msgw.close();
					},10000);
					this.musicList = uni.getStorageSync('musicList');
					uni.request({
						url: 'http://musigedan.bfmzdx.cn/music/songlist?server=qqmusic&id='+id,
						method: 'GET',
						success: (res) => {
							this.$refs.msgw.close();
							let List = res.data;
							for(let i=0;i<List.length;i++) {
								List[i].searchText = List[i].title + '-' + List[i].author
							}
							let num = this.musicList.length + 1;
							let msg = {
								title: "歌单"+num,		//	歌单名称
								id: id,					//	歌单ID
								platform: "QQ",			//	歌单平台
								playList: List,			//	歌单信息（原始数据）
								showList: List,			//	展示数据
								isopen: false,			//	是否展开
							}
							let flag = false;
							for(let i=0;i<this.musicList.length;i++) {
								if(this.musicList[i].id == id) {
									flag = true;
								}
							}
							if(!flag) {
								this.musicList.push(msg);
							}
							this.text = "";
							uni.setStorageSync('musicList', this.musicList);
							this.closeDialog();
						}
					})
				}
			},
			playThis(index, inde){
				let message = this.musicList[index].showList[inde];
				this.$refs.msgw.open('center');
				// this.$refs.msgw.close();
				uni.request({
					url: this.$pythonurl + '/kuwo/search/searchMusicBykeyWord?key=' + message.searchText + '&pn=1&rn=1',
					method: 'GET',
					success: (re) => {
						// console.log(re);
						let Music = re.data.data.list[0]
						uni.request({
							url: this.$pythonurl + '/kuwo/lrc?musicId=' + Music.rid,
							method: 'GET',
							success: (rea) => {
								// console.log(rea);
								let lrcx = rea.data.data.lrclist;
								uni.request({
									url: this.$pythonurl + '/kuwo/url?mid=' + Music.rid,
									method: 'GET',
									success: (reax) => {
										// console.log(reax);
										let url = reax.data.data.url;
										let author = Music.artist;
										let lrc = lrcx;
										let pic = Music.pic;
										let pre_url = this.$pythonurl + '/kuwo/url?mid=' + Music.rid;
										let title = Music.name;
										this.$musicInfo.author = Music.artist;
										this.$musicInfo.lrc = lrc;
										this.$musicInfo.pic = Music.pic;
										this.$musicInfo.pre_url = this.$pythonurl + '/kuwo/url?mid=' + Music.rid;
										this.$musicInfo.title = Music.name;
										this.$musicInfo.url = url;
										// #ifdef APP
										if(this.platform !== 'ios'){
											uni.downloadFile({
												url: this.$musicInfo.url,
												success: (es) => {
													if (es.statusCode === 200) {
														uni.getSavedFileList({
															success: (ares)=> {
																let Lis = ares.fileList;
																for(let k=0;k<Lis.length;k++){
																	uni.removeSavedFile({
																		filePath: Lis[k].filePath
																	});
																}
																setTimeout(()=>{
																	uni.saveFile({
																		tempFilePath: es.tempFilePath,
																		success: (req)=> {
																			this.$refs.msgw.close();
																			var savedFilePath = req.savedFilePath;
																			this.$audio.src = savedFilePath;
																			this.$audio.play();
																			uni.$emit('popshows', {
																				ispop: true
																			})
																		}
																	});
																},200)
															}
														})
													}
												}
											});
										} else {
											// ios 端
											this.$refs.msgw.close();
											this.$audio.src = this.$musicInfo.url;
											this.$audio.play();
											uni.$emit('popshows', {
												ispop: true
											})
										}
										// #endif
										// #ifdef H5
										this.$refs.msgw.close();
										this.$audio.src = this.$musicInfo.url;
										this.$audio.play();
										// #endif
										this.author = this.$musicInfo.author;
										this.lrc = this.$musicInfo.lrc;
										this.pic = this.$musicInfo.pic;
										this.pre_url = this.$musicInfo.pre_url;
										this.title = this.$musicInfo.title;
										this.url = this.$musicInfo.url;
										let music = uni.getStorageSync('music');
										let flag = false;
										let info = 0;
										for(let i=0;i<music.length;i++){
											music[i].isclick = false;
										}
										for(let i=0;i<music.length;i++){
											if(music[i].pre_url == this.$musicInfo.pre_url) {
												flag = true; info = i;
											}
										}
										if(flag == false) {
											let msg = {
												author: this.$musicInfo.author,
												isclick: true,
												lrc: this.$musicInfo.lrc,
												pic: this.$musicInfo.pic,
												pre_url: this.$musicInfo.pre_url,
												title: this.$musicInfo.title,
												url: this.$musicInfo.url
											}
											music.push(msg);
										} else {
											music[info].isclick = true;
										}
										uni.setStorageSync('music', music);
										uni.$emit('updateTabbar');
										// #ifdef APP
										if(this.platform !== 'ios'){
											setTimeout(()=>{
												uni.$emit('info', {
													author: this.$musicInfo.author,
													lrc: this.$musicInfo.lrc,
													pic: this.$musicInfo.pic,
													pre_url: this.$musicInfo.pre_url,
													title: this.$musicInfo.title,
													url: this.$musicInfo.url
												})
											},500)
										} else {
											setTimeout(()=>{
												uni.$emit('info', {
													author: this.$musicInfo.author,
													lrc: this.$musicInfo.lrc,
													pic: this.$musicInfo.pic,
													pre_url: this.$musicInfo.pre_url,
													title: this.$musicInfo.title,
													url: this.$musicInfo.url
												})
											},400)
										}
										// #endif
										// #ifdef H5
										setTimeout(()=>{
											uni.$emit('info', {
												author: this.$musicInfo.author,
												lrc: this.$musicInfo.lrc,
												pic: this.$musicInfo.pic,
												pre_url: this.$musicInfo.pre_url,
												title: this.$musicInfo.title,
												url: this.$musicInfo.url
											})
										},400)
										// #endif
									}
								});
								// 
							}
						})
					}
				})
				
			},
			deleteList(index){
				var list = [];
				for(let i=0;i<this.musicList.length;i++){
					if(i !== index){
						list.push(this.musicList[i])
					}
				}
				uni.setStorageSync('musicList', list);
				this.musicList = list;
			},
			close(){
				uni.$emit('close_myplaylist', {
					ismysong: true
				})
				uni.$emit('updateTabbar')
			}
		}
	}
</script>

<style>
	/* 控制滚动条不出现 */
	/deep/::-webkit-scrollbar {
		 display: none;
		 width: 0;
		 height: 0;
	}
</style>
